<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <script src="./vue.js"></script>
    <script src="./moment.min.js"></script>
    <style>
        .col{
            color: red;
        }
        table{
            width: 700px;
            border-collapse: collapse;
        }
        td, th{
            border: 1px solid #000;
            padding: 9px;
        }
        input{
            margin-top: 5px;
            height: 20px;
        }
        button{
            border: none;
            background-color: rgb(24, 149, 238);
            color: #fff;
            height: 30px;
        }
        a{
            text-decoration: none;
            color: rgb(79, 79, 241);
        }
    </style>
</head>
<body>
    <!-- 目标： 数据铺设 -->
    <!-- 
        1：把默认数据显示到表格上
        2：注意资产超过一百的 都用红色字体标出来
        3：实现表单数据新增进表格功能
        4：判断用户输入是否为空给提示
        5：点击删除的a标签 删除数据
        6：删除没数据了 要提示暂无数据的tfoot
        7：计算总价 均价
     -->
    <div id="app">
        <h2>商品管理</h2>
        <table>
            <tr>
                <th><input type="checkbox" v-model="allCheck">全选</th>
                <th>编号</th>
                <th>资产名称</th>
                <th>价格</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, i ) in arr">
                <td><input type="checkbox" v-model="item.isCheck"></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td :class="{'col': item.price > 100}">{{item.price}}</td>
                <td>{{item.time | timer}}</td>
                <td><a href="javascript:;" @click="del(i)">删除</a></td>
            </tr>
            <tr>
                <td colspan="5" v-if="arr.length === 0">暂无数据</td>
            </tr>
        </table>
        <span>总价格: {{allPrice}}  均价：{{avgPrice}}</span>
        <input type="text" placeholder="资产名称" v-model="name">
        <input type="text" placeholder="价格" v-model.number="price">
        <button type="primary" @click="add" >添加资产</button>
    </div>
    <script>

        Vue.filter("timer", (val)=>{
            return moment(val).format('lll');
        })
        var app = new Vue({
            el: "#app",
            data: {
                name:'',
                price: '',
                arr:[
                    {
                        id:100,
                        name: "外套",
                        price: 199,
                        time: new Date(),
                        isCheck: false
                    },
                    {
                        id:101,
                        name: "裤子",
                        price: 45,
                        time:   new Date(),
                        isCheck: false
                    },
                    {
                        id:102,
                        name: "鞋",
                        price: 265,
                        time: new Date(),
                        isCheck: false
                    },
                    {
                        id:104,
                        name: "袜子",
                        price: 17,
                        time: new Date(),
                        isCheck: false
                    },
                ]
            },
            computed:{
                allPrice(){
                    var sum = 0;
                    this.arr.forEach(item=>{
                        sum += item.price
                    })
                    return sum;
                },
                avgPrice(){
                    return (this.allPrice/this.arr.length).toFixed(2)
                },
                allCheck:{
                    set(val){   // val 接收此刻的全选状态 true\false
                        console.log(val)
                        // 点击全选时 更改所有的isCheck为全选状态相同
                        this.arr.forEach(item=>{
                            item.isCheck = val
                        })
                    },
                    // 依赖属性发生变化
                    get(){
                        // 判断数组中的每一条数据是否全选中
                        console.log('get')
                        // every 检测数值元素的每个元素是否都符合条件。
                        return this.arr.every(item=>{
                            return item.isCheck == true
                        })
                    }
                }
            },
            methods:{
                add(){
                    // 判断用户输入是否为空
                    if(this.name.length === 0 || this.price.length === 0) return alert('不能为空');
                    // 创建一条要添加的数据
                    var obj = {
                        id: this.arr[this.arr.length-1].id ? this.arr[this.arr.length-1].id + 1 : 100 ,
                        name: this.name,
                        price: this.price,
                        time: new Date()
                    }
                    // 添加到数组中
                    this.arr.push(obj)

                    // 表单内容清空
                    this.name = '',
                    this.price = ''
                },
                // 删除
                del(index){
                   if(confirm("确定要删除吗?")){
                        this.arr.splice(index, 1)
                   }
                },
            }

        })
    </script>
</body>
</html>